<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/style-user.css">
    <script src="layui/layui.js"></script>

</head>
<body>
    <div class="layui-btn" id="addBook">添加图书</div>

    <form class="layui-form" id="selectBookForm" style="display: none">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="bookName" placeholder="请输入" class="layui-input" autocomplete="off">
            </div>
            <button id="selectBook" class="layui-btn">搜索</button>
        </div>
    </form>


    <form class="layui-form" id="addBookForm" style="display: none">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="bookName" placeholder="请输入" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属分类</label>
            <div class="layui-input-block">
                <select name="category.categoryId" id="select1">
                    <option>请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">--</label>
            <div class="layui-input-block">
                <input type="text" name="bookName" placeholder="请输入" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-input-inline login-btn">
            <button lay-submit lay-filter="addButton" class="layui-btn">添加</button>
        </div>
        <div class="layui-btn"  onclick="history.go(-1);">返回上级</div>
    </form>

    <form class="layui-form" id="updateBookForm" lay-filter="updateFormFilter" style="display: none">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="bookName" placeholder="请输入" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属分类</label>
            <div class="layui-input-block">
                <select name="category.categoryId" id="select2">
                    <option>请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">--</label>
            <div class="layui-input-block">
                <input type="text" name="bookName" placeholder="请输入" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-input-inline login-btn">
            <button lay-submit lay-filter="updateButton" class="layui-btn">修改</button>
        </div>
        <div class="layui-btn"  onclick="history.go(-1);">返回上级</div>
    </form>

    <table id="book" lay-filter="tableFilter"></table>
    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="upd">修改</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>

    <script>
        layui.use(['table','form','layer','laydate'],function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var $ = layui.$;
            //渲染表格
            table.render({
                elem:'#book',
                url:'book/selectBooks',
                cols:[[
                    {field:'bookName',title:'名称',sort:true},
                    {field:'author',title:'作者',sort:true},
                    {field:'price',title:'定价',sort:true},
                    {field:'dprice',title:'当当价',sort:true},
                    {field:'press',title:'出版社',sort:true},
                    {field:'pressDate',title:'出版时间',sort:true},
                    {field:'cover',title:'封面',sort:true},
                    {field:'sale',title:'销量',sort:true},
                    {field:'stock',title:'库存',sort:true},
                    {title:'操作',toolbar:'#bar'}
                ]]
            })
            //条件查询  表格重载
            $("#selectBook").click(function () {
                table.reload('book',{
                    where:{
                        bookName:$("#selectBookForm").val()
                    }
                })
            })
            //添加
            $('#addBook').click(function () {
                //加载添加页面层
                layer.open({
                    type:1,
                    title:'添加图书',
                    area:'700px',
                    content:$('#addBookForm')
                })
            })
            //提交添加页面内容
            form.on('submit(addButton)',function () {
                $.ajax({
                    url:'book/addBook',
                    data:$('#addBookForm').serialize(),
                    success:function (result) {
                        if(result.flag){
                            layer.msg('添加成功');
                            layer.closeAll();
                            table.reload('book');
                        }
                    }
                })
            })
            //给修改和删除绑定点击事件  利用toolbar工具
            table.on('tool(tableFilter)',function (obj) {
                if(obj.event==upd){
                    //页面层
                    layer.open({
                        type:1,
                        title:'添加图书',
                        area:'700px',
                        content:$('#updateBookForm')
                    })
                    //加载修改页面数据
                    $.ajax({
                        url:'book/getOneBook',
                        data:'id='+obj.data.bookId,
                        success:function (result) {
                            //form对象val方法  是给该form表单内的输入框赋值
                            //其中第一个参数updateFormFilter 是该from表单的lay-filter属性的值
                            //第二个参数是一个键值对类型的对象  key是输入框的name属性值  value是输入框的value值
                            form.val('updateFormFilter',{
                                bookId:result.bookId,
                                bookName:result.bookName,
                                ...
                            })
                        }
                    })
                    //提交修改内容
                    form.on('submit(updateButton)',function () {
                        $.ajax({
                            url:'book/updateBook',
                            data:$('#updateBookForm').serialize(),
                            success:function (result) {
                                if(result.flag){
                                    layer.msg('修改成功');
                                    layer.closeAll();
                                    table.reload('book');
                                }
                            }
                        })
                    })
                }else if(obj.event==del){
                    layer.confirm('你确定要删除该图书吗？',function (index) {
                        $.ajax({
                            url:'book/removeBook',
                            data:'id='+obj.data.bookId,
                            success:function (result) {
                                if(result.flag){
                                    layer.msg('删除成功');
                                    table.reload('category')
                                }
                            }
                        })
                        layer.close(index);
                    })
                }
            })
        })
    </script>
</body>
</html>